<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>vue安装</title>
	<style>
		[v-cloak] {
		  display: none;
		}
	</style>
</head>
<body>

	<div id="app">
		<button @click="changeTime">改变time</button>
		<banji :list="list"></banji>
	</div>
	
	<script src="../lib/vue.3.4.js"></script>
	<script>

		var xuesheng = {
			template: `<div>{{name}}：{{age}}</div>
				<div>{{time}}</div>`,
			props: {
				name: '',
				age: ''
			},
			inject: ['time']
		}

		var banji = {
			template: `<xuesheng v-for="(item, index) in list" :key="index"
				v-bind="item"></xuesheng>`,
			components: {
				xuesheng
			},
			props: {
				list: Array
			}
		}


		const app = Vue.createApp({
			components: {
				banji,
			},
			data () {
				return {
					list: [
						{name: '张三', age: 12},
						{name: '李四', age: 23},
						{name: '王五', age: 15},
					],
					nowTime: '2021-03-18 11:11:11'
				}
			},
			provide () {
				return {
					time: this.nowTime
				}
			},
			mounted () {
				console.log(this.time);
				console.log(this.nowTime);
			},
			methods: {
				changeTime () {
					this.nowTime = new Date().toLocaleString();
				}
			}
		})
		app.mount("#app");
	</script>
</body>	
</html>